<!--  -->
<template>
  <el-calendar :locale="zhcn">
    <template #dateCell="{ data }">
      <div style="height: 100%" @click="handleClick(data)">
        <P :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split("-").slice(1).join("-") }}
          {{ data.isSelected ? "✔️" : "" }}
        </P>
      </div>
    </template>
  </el-calendar>
 
  <el-dialog
    title="考核实习表"
    v-model="dialogFormVisible"
    width="1200px"
    
    :append-to-body="true">
    <el-form :model="formOne">
      <el-form-item label="标题" :label-width="formLabelWidth" style="width:500px">
        <el-input v-model="formOne.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="日期" :label-width="formLabelWidth" style="width:500px">
        <el-input
          placeholder="请输入内容"
          v-model="formOne.day"
          :disabled="true"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-select v-model="formOne.type" slot="prepend" placeholder="请选择">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="内容" :label-width="formLabelWidth" style="width:1000px;height:300px">

        <el-upload
  style="display: none"                               
  class="quill-picture-uploader"                      
  action="http://localhost:9090/updown/updateImgFile"    
  :before-upload="bfUpload"                           
  :on-success="uploadSuccess"                  
  :headers="myHeaders"  
>
</el-upload>
  <quill-editor
  ref="myQuillEditor"
    v-model.content="messgae"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)"
    @ready="onEditorReady($event)"
    style="height: 200px"
  >

</quill-editor>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" >
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
  
  <script>
import { QuillEditor } from "@vueup/vue-quill";
import  {uploadImage}  from "../../api/file/img";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  
  name: "App",
  components: {
    QuillEditor,
  },
  data() {
    let self = this
    return {
      
     // 富文本编辑器配置
     editorOption: {
        modules: {
          clipboard: {
      // 粘贴版，处理粘贴时候的自带样式
      matchers: [['img', function(node,Delta){
          let ops = []
          Delta.ops.forEach(op =>{
            if(op.insert && typeof op.alt === 'String'){
              ops.push({
                insert:op.insert
              })
            }
          })
          Delta.ops = ops
          let arr = node.src.split(",");
          let  mime = arr[0].match(/:(.*?);/)[1];
          let  bstr = window.atob(arr[1]);
          let  n = bstr.length;
          let  u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          var file = new File([u8arr], '10086.png', { type: mime });  
          //console.log(`node`, file);          
          //self.fileList.push(file)
       // self.show(file)
          return Delta
      }]],
     },
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
              ["blockquote", "code-block"], //引用，代码块
              [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
              [{ list: "ordered" }, { list: "bullet" }], //列表
              [{ script: "sub" }, { script: "super" }], // 上下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文本方向
              [{ size: ["small", false, "large", "huge"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
              [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
              [{ font: [] }], //字体
              [{ align: [] }], //对齐方式
              ["clean"], //清除字体样式
              ["image"], //上传图片、上传视频 ['image', 'video']
            ],
            handlers: {
              image: function (value) {    //替换原图片上传功能
                if (value) {
                  console.log(`value`, value);
                  document.querySelector(".quill-picture-uploader input").click(); //核心
                } else {
                  this.quill.format("image", false);
                }

                  }
             }
          },
      
        },
        
        placeholder: "请输入内容...",
 },
      msg: "",
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formOne: {
        title: "",
        message: "",
        day: "",
        userId: "",
        type:""
      },
      formLabelWidth: "120px",
      fileList: [
      this.formLabelWidth
      
      ],
      textarea: "",
      
    };
  },

  methods: {
    handleClick(data) {
      this.dialogFormVisible = true;
      this.formOne.day = data.day;
    },
    show(file){
     // 添加匹粘贴板事件禁止图片粘贴
     //var uploadFile = new FormData(file);
   
//注意files是对应后台的参数名哦   
       //console.log(param);                                 // 添加form表单中其他数据
       
      console.log(`file[0]`, file[0]);
    
        let param = new FormData(); //创建form对象
        param.append("file", file); //通过append向form对象添加数据
       
     updateImg(file).then(item=>{
      console.log(`item`, item);
     }).catch(item=>{
      console.log(`item2`, item);
     })
    },
   
    // 失去焦点事件
    onEditorBlur(quill) {
      console.log("editor blur!", quill,this.message);
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log("editor focus!", quill,this.message);
    },
    // 准备富文本编辑器
    onEditorReady(quill) {},
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      
      this.content = html;
    },
    
   //上传图片之前校验
bfUpload(file) {
   
    if ("image/png" == file.type || "image/jpeg" == file.type) {
    } else {
        this.$message.error('图片插入失败,请检查文件格式');
        return;
    }
},
//正文插入图片上传成功调用

  uploadSuccess(res, file){
      // 首先获取富文本编辑器的实例
     
      let that=this
      this.$nextTick(() => {
        console.log('that.$refs.myQuillEditor',this.$refs.myQuillEditor.$refs.editor.quill)
      let quill = this.$refs.myQuillEditor.$refs.editor.quill
      // 上传成功所执行
      if (res !== null) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片res为服务器返回的数据
          quill.insertEmbed(length, 'image', res)
          // 光标移动至文本末端
          quill.setSelection(length + 1)
      } else {
          this.$message.error('图片插入失败')
      }
      // loading动画消失
      this.quillUpdateImg = false
})
      
    
},


// 调用


  },
};
</script>
  

  <style>
.is-selected {
  color: #1989fa;
}
  .main {
    margin: 50px 300px;
  }
  .upload-demo {
    margin-top: 30px;
  }
  .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
  height: 125px;
  overflow: auto;
}
</style>